<template>
  <div class="box">
       <header class="header">
        <div class="header-button isleft">
            <router-link to="/" tag="label" >
              <span class="iconfont icon-fanhui"></span>
            </router-link>
        </div>
        <h1 class="header-title">城市选择</h1>
        <div class="header-button">消息</div>
      </header>
      <div class="content">
          <mt-index-list :show-indicator="true" >
            <mt-index-section index="#" >
              <mt-cell  v-for="(itms, idx1) of hotcity" :key='idx1' :title="itms" @click.native = "getHotCity(itms)"></mt-cell>
            </mt-index-section>
            <mt-index-section v-for = "(item, iddx) of list" :key="iddx" :index="item.letter">
              <mt-cell v-for="(itm, idx) of item.cities" :key="idx" :title="itm.name" @click.native = "getCity(itm)"></mt-cell>
            </mt-index-section>
          </mt-index-list>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { IndexList, IndexSection } from 'mint-ui'
Vue.use(IndexList, IndexSection)
export default {
  data () {
    return {
      list: [],
      hotcity: ['郑州', '洛阳', '南阳']
    }
  },
  methods: {
    getCity (item) {
      console.log(item)
      sessionStorage.setItem('city', item.name)
      this.$router.push('/')
    },
    getHotCity (item) {
      console.log(item)
      sessionStorage.setItem('city', item)
      this.$router.push('/')
    }
  },
  created () {
    if (localStorage.getItem('list')) {
      this.list = JSON.parse(localStorage.getItem('list'))
    } else {
      fetch('/daxun/city.json').then(res => res.json())
        .then(data => {
          console.log(data)
          localStorage.setItem('list', JSON.stringify(data))
          this.list = data
        })
    }
  }
}
</script>
<style lang="scss">
.mint-indexlist {
  height: 100%;
  .mint-indexlist-content {
    height: 100%!important;
  }
}
</style>
